import React, {Component} from "react";
import {connect} from 'react-redux';
import ProTable from '@ant-design/pro-table';
import Add from './Add'
import {Badge, Button, Modal, Popconfirm} from 'antd';

class Banner extends Component {

    constructor(props) {
        super(props);

        this.state = {
            data: [],
            visible: false,
            type: '',
            row: {},
            parent: [],
            params: {}

        };
        this.columns = [
            {
                title: 'ID',
                dataIndex: 'id',
                key: 'id',
                align: 'center',
                hideInSearch: true,
                width: 80,


            },
            {
                title: '标题',
                align: 'center',
                copyable: true,
                ellipsis: true,
                dataIndex: 'title',
                key: 'title',
                hideInSearch: false,
                width: 80,
                render: (_) => <a>{_}</a>,
            },

            {
                title: 'category',
                align: 'center',
                dataIndex: 'category',
                tip: '1-跳转类型h5 2-跳转类型 app内部 只能有效一种 ',
                hideInSearch: true,
                width: 80,
                render: (_, record) => {
                    return (
                        <Badge
                            status={ 'success' }
                            text={record.category === '1'?'H5':'APP'}/>
                    );
                }

            },

            {
                title: 'html',
                align: 'center',
                ellipsis: true,
                copyable: true,
                hideInSearch: true,
                dataIndex: 'htmlUrl',
                tip: 'h5跳转地址 不区分ios或android  category:1 该h5地址有效 category:2 app内部跳转路径有效 ',
                key: 'htmlUrl',
                width: 100,
                render: (_, record) => {
                    return (
                            <a> <Badge
                                status={record.category === '1' ?'processing' : 'default'}
                                text={record.htmlUrl}/></a>
                    );
                }
            },
            {
                title: 'android',
                align: 'center',
                ellipsis: true,
                copyable: true,
                hideInSearch: true,
                dataIndex: 'action',
                key: 'action',
                tip: 'android-App内部跳转路径  category:2 路径有效',
                width: 100,
                render: (_, record) => {
                    return (
                        <a> <Badge
                            status={record.category === '2' ? 'processing' : 'default'}
                            text={record.action}/></a>
                    );
                }
            }, {
                title: 'ios',
                align: 'center',
                ellipsis: true,
                copyable: true,
                hideInSearch: true,
                dataIndex: 'actionPath',
                key: 'actionPath',
                tip: 'ios-App内部跳转路径 category:2 路径有效',
                width: 100,
                render: (_, record) => {
                    return (
                        <a> <Badge
                            status={record.category === '2' ? 'processing' : 'default'}
                            text={record.actionPath}/></a>
                    );
                }
            },

            {
                title: '展示图片',
                dataIndex: 'imageUrl',
                align: 'center',
                key: 'image',
                hideInSearch: true,
                valueType: 'image',
                width: 80,
            },
            {
                title: '状态',
                align: 'center',
                ellipsis: true,
                hideInSearch: true,
                width: 80,
                render: (_, record) => {
                    return (
                        <Popconfirm
                            title="确定操作？"
                            onConfirm={() => this.status(record)}
                            okText="确定"
                            cancelText="取消"
                        > <a>
                            <Badge
                                status={record.isDelete == 0 ? 'success' : 'error'}
                                text={record.isDelete == 0 ? '正常' : '关闭'}/>
                        </a>
                        </Popconfirm>


                    );
                }
            },

            {
                title: '创建时间',
                dataIndex: 'createTime',
                align: 'center',
                hideInSearch: true,
                width: 80,
            },

            {
                title: '操作',
                align: 'center',
                width: 100,
                hideInSearch: true,
                render: (_, record) => {
                    return (
                        <div>
                            <a onClick={() => this.upd(record)} style={{marginLeft: 2}}>编辑</a>
                            <Popconfirm
                                title="确定操作？"
                                onConfirm={() => this.del(record)}
                                okText="确定"
                                cancelText="取消"
                            > <a style={{marginLeft: 10, color: 'red'}}
                            >删除</a>
                            </Popconfirm>

                        </div>
                    )
                }
            }

        ];


    }


    handleCancel = () => {
        this.props.clear();
        this.setState({
            visible: false
        })
    };
    add = (row) => {
        this.setState({
            visible: true,
            type: '0',
            row: row
        })
    }
    upd = (record) => {
        this.setState({visible: true, row: record, type: '1'})
    }
    del = (record) => {
        this.props.del({id: record.id}).then(res => {
            this.props.list();

        })
    };
    status = (record) => {
        this.props.status({id: record.id, status: record.isDelete === 1 ? 0 : 1}).then(res => {
            this.props.list();

        })
    };

    render() {
        const {row, type} = this.state;
        const {data} = this.props;

        return (
            <div>
                <ProTable
                    columns={this.columns}
                    request={(params, s, f) => {
                        this.setState({params})
                        this.props.list(params)
                    }}
                    dataSource={data}
                    columnsState={{
                        persistenceKey: 'pro-table-singe-demos',
                        persistenceType: 'localStorage',
                    }}
                    rowKey="id"
                    search={{
                        defaultCollapsed: false,
                        // labelWidth: 'auto',
                        labelWidth: 600,
                        span: 12
                    }}

                    pagination={{
                        pageSize: 20,
                    }}
                    revalidateOnFocus={true}
                    dateFormatter="string"
                    headerTitle="banner列表"
                    toolBarRender={() => [
                        <Button key="create" type="primary" onClick={() => this.add()}>
                            添加
                        </Button>,

                    ]}
                />

                    <Modal destroyOnClose visible={this.state.visible} title={type === '0' ? '新增' : '编辑'}
                           footer={null}
                           onCancel={this.handleCancel} handleCancel={this.handleCancel}>
                        <Add handleCancel={this.handleCancel} record={row} type={type}></Add>
                    </Modal>

            </div>
        );

    }


}


const mapState = state => ({
    ...state.banner

});

const mapDispatch = dispatch => ({
    ...dispatch.banner
})

export default connect(mapState, mapDispatch)(Banner);